<template>
	<div id="app">
		
		<div class="page-top">
			<h2>购物车</h2>
			<div class="page-login">
				<div class="page-l">
					<img src="../assets/logo.png" alt="">
					<h2>个人中心</h2>
				</div>
				<div class="page-r">
					
					<span @click="dologin">登录</span>
					<span @click="doregister">注册</span>
				</div>
			</div>			
		</div>
		<div class="content">
			<div>
				<div class="content-img" @click="shdz">
					<img src="../assets/evaluate.png" alt="">
					<span>收货地址</span>
				</div>
				
			</div>
			<div>
				<div class="content-img" @click="scsp">
					<img src="../assets/love.png" alt="">
					<span>收藏商品</span>
				</div>
			</div>
			<div>
				<div class="content-img" @click="wdzj">
					<img src="../assets/descover.png" alt="">
					<span>我的足迹</span>
				</div>
			</div>
			<div>
				<div class="content-img" @click="lsdd">					
					<img src="../assets/order.png" alt="">
					<span>历史订单</span>					
				</div>
			</div>
		</div>
		
		<van-divider :style="{ color: '#707070', borderColor: '#707070', padding: '0 12px'}">推荐</van-divider>
	</div>
</template>

<script>
	
	export default {
	  
	  methods:{
	  
		dologin(){
			this.$router.push('/login')
		},
		doregister(){
			this.$router.push('/register')
		}
		
		
	  }
	}
	
</script>

<style>
	van-divider{
			}
	.page-top{
		height: 25vh;
		width: 100%;
		background-color: #C01535;
	}
	.page-login{
		height: 20vh;
		width: 85%;
		background-color: #d6d6d6;
		margin: 0 auto;
		margin-top: 4vh;
		border-radius: 3%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.page-r{
		margin-top: 10vh;
	}
	.page-l{
		margin-top: 2vh;
	}
	.page-r{
		color: #1e1e1e;
		padding: 10px;
	}
	.page-l>img{
		height: 5vh;
		width: 7vw;
	}
	.content{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 5vh;
		margin-bottom: 3vh;
	}
	.content-img{
		display: flex;
		flex-direction: column;
		width: 15vw;
		margin-top: 5vh;
		
	}
	.content-img>img{
		height: 4vh;
		width: 7vw;
		margin: 0 auto;
		text-align: center;
	}
	.content-img>span{
		margin: 0 auto;
		text-align: center;
		color: #868686;
		
	}
</style>
